<template>
    <div>

        <h1>课程列表</h1>

        <table border="1" style="width:100%">

            <tr v-for="(item,index) in data">

                <td>{{item.id}}</td>
                <td>{{item.course_name}}</td>

            </tr>

        </table>

        <!-- 表格控件 -->
        <van-grid :gutter="10">
            
            <van-grid-item v-for="(item, index) in data" :key="index">

                <video width="300" height="240" :src="src + item.video" controls="controls" autoplay="autoplay" />
                <router-link :to="{name:'coursedetail', query:{'cid':item.id}}">{{item.course_name}}</router-link>

            </van-grid-item>

        </van-grid>

        <!-- 分页控件 -->
        <van-pagination @change="get_data" v-model="page" :total-items="total" :items-per-page="size" />

        <van-field v-model="pages" label="页码" placeholder="请输入要查看的页码" />

        <van-button type="info" @click="pageee">确定</van-button>
    </div>
</template>

<script>
import mycate from './mycate'
export default {
    data() {
        return {
            data:[],
            page:1,
            size:2,
            total:0,
            pages:'',
            src:'http://localhost:8000/static/upload/'
        }
    },

    components:{
        mycate
    },

    mounted:function(){

        this.get_data()

    },

    methods:{
        get_data(){
            this.axios.get('http://localhost:8000/courselist/',{params:{'page':this.page,
            'size':this.size}}).then(res=>{
                console.log(res.data)

                this.data = res.data.data
                this.total = res.data.total

            })
        },

        pageee(){

            this.page = parseInt(this.pages)

            this.axios.get('http://localhost:8000/courselist/',{params:{'page':this.page,
            'size':this.size}}).then(res=>{
                console.log(res.data)

                this.data = res.data.data
                this.total = res.data.total

            })

        },

    }
}
</script>

<style>


</style>